<template>
	<!-- el-container - 容器布局
		
		
	 
	 -->
	<!-- 容器布局 -->
	<el-container class="home">
		<!-- 顶栏 -->
		<el-header class="header" height="80px">
			<!-- logo -->
			<el-image class="logo" :src="require('@/assets/顺大微生活.jpg')"></el-image>
			<!-- 控件 -->
			<span class="btn el-icon-s-fold" @click="sildeFn"></span>
			<!-- 标题 -->
			<h2 class="title">头条后台管理系统</h2>
			<!-- 用户信息 -->
			<div class="user">
				<!-- 头像 -->
				<el-avatar
					:src="user.head_img | imgUrl"
					:size="50"
					fit="fill"
					alt="avatar"
				></el-avatar>
				<!-- 用户名 -->
				<p>欢迎你： {{ user.nickname }} !</p>
				<!-- 按钮 -->
				<el-dropdown>
					<i class="el-icon-arrow-down arrow"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item icon="el-icon-setting">设置中心</el-dropdown-item>
						<el-popconfirm
							confirm-button-text="退出"
							@confirm="logoutFn"
							cancel-button-text="再想想"
							icon="el-icon-info"
							icon-color="red"
							title="真的要退出了吗？"
						>
							<el-dropdown-item slot="reference" icon="el-icon-user">
								退出登录
							</el-dropdown-item>
						</el-popconfirm>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</el-header>
		<el-container class="body">
			<!-- 侧边栏 -->
			<el-aside class="aside" :width="asideWidth">
				<!-- el-menu - 导航菜单
					el-submenu - 一级菜单（可展开）
					el-menu-item - 菜单子项（不可展开）
					<slot="title"> - 标题
					
					el-menu-item-group - 菜单栏编组
				 -->
				<!-- 属性
					index - 不能重复
					default-active - 默认选中下标
					unique-opened - 菜单互斥
					router - 使用 vue-router 路由模式
				 -->
				<!-- default-active="/article" -->
				<el-menu
					:default-active="$route.path"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
					unique-opened
					router
					:collapse="collapse"
					class="menus"
				>
					<!-- :style="{ width: asideWidth }" -->
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-s-claim"></i>
							<span slot="title">文章管理</span>
						</template>
						<el-menu-item index="/article" class="items">
							<i class="el-icon-s-order"></i>
							<span slot="title">文章列表</span>
						</el-menu-item>
						<el-menu-item index="/publish" class="items">
							<i class="el-icon-circle-plus"></i>
							<span slot="title">文章添加</span>
						</el-menu-item>
					</el-submenu>
					<el-submenu index="2" class="menus">
						<template slot="title">
							<i class="el-icon-menu"></i>
							<span slot="title">栏目管理</span>
						</template>
						<el-menu-item index="/category" class="items">
							<i class="el-icon-s-help"></i>
							<span slot="title">栏目列表</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<!-- 主容器 -->
			<el-main class="main"><router-view /></el-main>
		</el-container>
	</el-container>
</template>

<script>
import { getUserId, getToken, removeToken, removeUserId } from '@/utils/localStorage.js';
import { getUserInfoAPI } from '@/api/user.js';
export default {
	name: 'Home',
	async created() {
		// 获取用户信息
		const { data } = await getUserInfoAPI(getUserId());
		console.log(data);
		// 安全阻断
		if (data.message !== '获取成功') return this.$message.error(result.message);
		this.user = data.data;
	},
	data() {
		return {
			user: {
				nickname: '火星网友',
				head_img: 'https://img.yzcdn.cn/vant/cat.jpeg'
			},
			collapse: false,
			asideWidth: '200px',
			visible: false
		};
	},
	methods: {
		// 退出登录
		logoutFn() {
			console.log('退出登录');
			removeUserId();
			removeToken();
			this.$message.success({
				message: '退出成功！',
				onClose: () => this.$router.push('/login'),
				duration: 1500
			});
		},
		// 展开收起菜单
		sildeFn() {
			this.collapse = !this.collapse;
			if (!this.collapse) {
				let i = 65;
				let itemid = setInterval(() => {
					i += 2;
					if (i >= 200) clearInterval(itemid);
					this.asideWidth = i + 'px';
				}, 1);
			}
			if (this.collapse) {
				let i = 200;
				let itemid = setInterval(() => {
					i -= 2;
					if (i <= 65) clearInterval(itemid);
					this.asideWidth = i + 'px';
				}, 1);
			}
		}
	}
};
</script>

<style lang="less" scoped>
.header,
.aside {
	background: #545c64;
}
.aside {
	height: 100vh;
	// display: flex;
	// justify-content: center;
}
.header {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100px;
	color: #fff;
	.logo {
		position: absolute;
		top: 0;
		left: 0;
		width: 200px;
		height: 80px;
	}
	.btn {
		top: 0;
		position: absolute;
		left: 200px;
		width: 80px;
		height: 80px;
		text-align: center;
		line-height: 80px;
		display: block;
		font-size: 40px;
		// background-color: pink;
	}
	.title {
		flex: 1;
		text-align: center;
	}
	.user {
		// background-color: pink;
		width: 300px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		.arrow {
			font-size: 25px;
			color: #fff;
		}
	}
}
.menus {
	width: 200px;
	border-right: 1px solid;
}
</style>
